<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>euv-demo-问卷</title>
</head>
<body>

    <div id="app">
        <header>
            <img src="./favicon.png" alt="">
            <h2 style="margin: auto 0;">CYue问卷</h2>
            <nav class="header-nav">
                <ul class="nav-menu">
                    <li>
                        <a href="./index.html">首页</a>
                    </li>
                    <li class="nav-menu-item">
                        <a href="#">问卷</a>
                        <ul class="nav-sub-menu">
                            <li>
                                <a href="#" @click="gotoCreateWJ">创建问卷</a>
                            </li>
                            <li>
                                <a href="#" @click="gotoViewWJ">查看问卷</a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav-menu" e-show="login === false" style="display: flex;">
                    <li>
                        <a href="./pages/login.html">登录</a>
                    </li>
                    <li>
                        <a href="./pages/register.html">注册</a>
                    </li>
                </ul>
                <ul class="nav-menu" e-show="login" style="display: flex;">
                    <li>
                        <time>{{ nowTime }}</time>
                    </li>
                    <li>
                        <a href="#">{{ user.username }}</a>
                    </li>
                    <li>
                        <a href="#" @click="logout">logout</a>
                    </li>
                </ul>
            </nav>
        </header>

        <div class="slider" style="--width: 75%;--height: 75vh;max-width: 50rem;">
            <div class="slide active">
                <img src="./images/slide1.png" alt="slide1">
            </div>
            <div class="slide">
                <img src="./images/slide2.png" alt="slide2">
            </div>
            <div class="slide">
                <img src="./images/slide3.png" alt="slide3">
            </div>
        </div>

        <main>
            <section class="container-function">
                <h1 class="text-center">满足您的各类问卷/表单需求</h1>
                <div class="container-function-content">
                    <a class="card noborder shadow">
                        <div>
                            <img src="./images/function-wj.png" alt="">
                        </div>
                        <h3>问卷调查</h3>
                    </a>
                    <a class="card noborder shadow">
                        <div>
                            <img src="./images/function-test.png" alt="">
                        </div>
                        <h3>在线考试</h3>
                    </a>
                    <a class="card noborder shadow">
                        <div>
                            <img src="./images/function-test.png" alt="">
                        </div>
                        <h3>报名表单</h3>
                    </a>
                </div>
            </section>

            <section class="container-start">
                <img src="./images/down-banner.png" alt="">
                <div class="container-start-content">
                    <h1>信息收集，就用CYue问卷</h1>
                    <button class="container-start-button button" @click="gotoViewWJ">立即开始</button>
                </div>
            </section>

            <section class="container-discussion">
                <h1>讨论区</h1>
                <div class="container-discussion-content">
                    <ul class="flex-column gap-05em">
                        <li e-for="item in discussionDataSource">
                            <div class="flex-row gap-1em">
                                <img
                                    class="avatar"
                                    :src="'https://api.miaomc.cn/image/get?id=' + Math.round(Math.random() * 10)"
                                    alt="avatar"
                                >
                                <div>
                                    <div>
                                        <span>{{ item.username }}</span>
                                        <span>{{ item.time }}</span>
                                    </div>
                                    <p>{{ item.content }}</p>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <p class="text-center" e-if="discussionDataSource.length === 0">没有内容</p>
                </div>
                <form
                    class="container-discussion-publish"
                    @submit="publishDiscussion"
                    e-show="login"
                >
                    <label for="">
                        <textarea name="" id="" placeholder="在此处输入要评论的内容" required></textarea>
                    </label>
                    <div>
                        <input type="button" value="清空讨论" @click="clickClearDiscussion">
                        <input type="submit" value="发布">
                    </div>
                </form>
            </section>
        </main>
    </div>

    <footer>
        <div class="width-80 text-right">
            <p>
                QQ：
                <span>1484205856</span>
            </p>
            <p>
                手机号：
                <span>13071580229</span>
            </p>
            <p>
                作者邮箱：
                <span>hongweifei@cyue.net</span>
            </p>
        </div>
        <div>
            <p style="margin-top: 0;">&copy; 2024 洪炜斐</p>
        </div>
    </footer>

</body>
</html>

